@extends('layouts.app')

@section('content')
<div class="container spark-screen">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>

                <div class="panel-body cont">
                    <input v-model="newTodo" v-on:keyup.enter="addTodo">
                    <ul>
                        <li v-for="todo in todos">
                            <span>@{{ todo.text }}</span>
                            <button v-on:click="removeTodo($index)">X</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
    <script type="text/javascript">
        new Vue({
            el: '.cont',
            data: {
                newTodo: '',
                todos: [
                    { text: '新增todos' },
                    { text: '<h1>111</h1>' }
                ]
            },
            methods: {
                addTodo: function () {
                    var text = this.newTodo.trim();
                    if (text) {
                        this.todos.push({ text: text });
                        this.newTodo = '';
                    }
                    console.log(this.todos);
                },
                removeTodo: function (index) {
                    this.todos.splice(index, 1);
                }
            }
        });
    </script>
@endsection
